<!--
 * @Author: your name
 * @Date: 2021-07-01 18:05:36
 * @LastEditTime: 2021-07-03 09:54:05
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vuecli-demo\src\components\Todoheader.vue
-->
<template>
  <header class="header">
    <h1>todos</h1>
    <input 
      class="new-todo" 
      placeholder="What needs to be done?" 
      autofocus 
      v-model.trim="title"
      @keydown.enter="addfn"/>
  </header>
</template>

<script>
export default {
  data () {
    return {
      title:''
    }
  },
  methods: {
    addfn(){
      if(!this.title) return
      this.$emit('add-todo',this.title)
      this.title=''
    }
  }
};
</script>

<style>
</style>